<template>
  <div>
    <el-dialog
      title="告警列表"
      :visible.sync="isshowdia"
      :close-on-click-modal="false"
      @close="isshowdia = false"
      height="600"
    >
      <!--列表-->
      <el-table
        :data="maintains"
        highlight-current-row
        v-loading="listLoading"
        
        height="400"
        @selection-change="selsChange"
      >
        <el-table-column type="selection" width="55" align=center></el-table-column>
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="time" label="时间" align=center>
          <template slot-scope="scope">
            {{scope.row.time*1000 | paraseSyslogTime}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="告警类型" align=center></el-table-column>
        <el-table-column prop="content" label="告警内容" align=center></el-table-column>
        <el-table-column label="操作" width="160" align=center>
          <template scope="scope">
            <el-button size="small" @click="deleteone(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <!-- <el-col :span="24" class="toolbar"> -->
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" class="fl">批量删除</el-button>
      <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.curPage" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="fr">
      </el-pagination>-->
      <!-- </el-col> -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["bcount"],
  data() {
    return {
      isshowdia: false,
      count: 0,
      maintains: [],
      listLoading: false,
      sels: []
    };
  },

  computed: {
    // maintains(){
    //   return this.$store.state.app.warn
    // }
  },

  watch: {
    "$store.state.app.warn": {
      handler: function(n, o) {

        this.maintains =  this.formatarr(n)
        this.$emit("update:bcount", this.maintains.length);

      },
      deep: true
    }
  },

  mounted() {
    this.$store.state.app.warn = {
      1:{time: 1560220053, code: 1, type: "火灾", content: "tsetsetsetstsets" },
      2:{time: 1560220053, code: 2, type: "后台接口", content: "tsetsetsetstsets" },
      3:{time: 1560220053, code: 3, type: "websock提示", content: "tsetsetsetstsets" },
      4:{time: 1560220053, code: 4, type: "火灾", content: "tsetsetsetstsets" },
      5:{time: 1560220053, code: 5, type: "websock提示", content: "tsetsetsetstsets" },
      6:{time: 1560220053, code: 6, type: "后台接口", content: "tsetsetsetstsets" },
      7:{time: 1560220053, code: 7, type: "火灾", content: "tsetsetsetstsets" },
      8:{time: 1560220053, code: 8, type: "后台接口", content: "tsetsetsetstsets" },
      9:{time: 1560220053, code: 9, type: "websock提示", content: "tsetsetsetstsets" },
      10:{time: 1560220053, code: 10, type: "后台接口", content: "tsetsetsetstsets" },
      11:{time: 1560220053, code: 11, type: "火灾", content: "tsetsetsetstsets" },
      12:{time: 1560220053, code: 12, type: "后台接口", content: "tsetsetsetstsets" },
      13:{time: 1560220053, code: 13, type: "火灾", content: "tsetsetsetstsets" },
      14:{time: 1560220053, code: 14, type: "后台接口", content: "tsetsetsetstsets" }
    };
  },

  methods: {

    formatarr(n){
      
      return Object.keys(n).map(key => {
          return n[key]
      })
    },

    watma(n, o) {},

    deleteone(item) {
      
      delete this.$store.state.app.warn[item.code]

      this.maintains = this.formatarr(this.$store.state.app.warn)

      this.$emit("update:bcount", this.maintains.length);


    },
    batchRemove() {

      this.sels.map(item => {
        delete this.$store.state.app.warn[item.code]
      })

      this.maintains = this.formatarr(this.$store.state.app.warn)

      this.$emit("update:bcount", this.maintains.length);


    },
    selsChange(val) {
      this.sels = val;
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
